<template>
  <div class="mine">
<div class="top">
  <p>
    <i class="iconfont icon-xiaoxi"></i>
    <i class="iconfont icon-xiugai1"></i>
  </p>
  <img src="@/assets/img/shuye.png" alt="">
  <router-link to="/login">
    <div class="click">点击此处登录</div>
  </router-link>
  <div class="empty"></div>
  
</div>
<ul class="ula">
  <li>
<em class="iconfont icon-dingdan"></em>
<span>所有订单</span>
  </li>
  <li @click="funaa()">
  <em class="iconfont icon-gouwuche"></em>
<span>购物车</span>
  </li>
  <li>
<em class="iconfont icon-wodeyouhuiquan"></em>
<span>优惠券</span>
  </li>
  <li>
<em class="iconfont icon-jifen"></em>
<span>
  <router-link to="/empty">
    积分中心
  </router-link>
</span>
  </li>
</ul>

<ul class="ulb">
  <li>
    <i class="iconfont icon-shoucang"></i>
    <span>我的收藏</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>
  <li>
    <i class="iconfont icon-wodeguanzhu"></i>
    <span>我的体质</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>
  <li>
    <i class="iconfont icon-wodeyisheng"></i>
    <span>慢病管理</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>
  <li>
    <i class="iconfont icon-jiaren"></i>
    <span>家人和朋友</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>
  <li>
    <i class="iconfont icon-shuangxinliangkexin"></i>
    <span>兴趣愿望</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>
  <li>
    <i class="iconfont icon-blood"></i>
    <span>月经测试</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>
  <li class="last">
    <i class="iconfont icon-shezhi"></i>
    <span>设置</span>
    <em class="iconfont icon-youjiantou"></em>
  </li>

</ul>

<Footer/>
  </div>
</template>

<script>
export default {
methods:{
  funaa(){
    this.$router.push("/shopcart")
  }
}
}
</script>

<style scoped>
.icon-youjiantou{
  color: #999;
}
.mine{
  height: 6.2rem;
  background-color: #f8f7f7;
}

.ulb{
  background-color: #fff;
}
.ulb li{
  margin-left: .2rem;
  padding-right: .2rem;
 display: flex;
 justify-content: space-between; 
 align-items: center;
height: .42rem;
  background-color: #fff;
border-bottom: .01rem solid #999;
}
.ulb .last{
  border: none;
}
.ulb li span{
  flex: 1;
  padding-left: .1rem;
}
.ula{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: .95rem;
  background-color: #fff;
  margin-bottom: .1rem;
}
.ula li{
  height: .95rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.ula em{
  width: .42rem;
  height: .42rem;
  text-align: center;
  line-height: .42rem;
  border-radius: 50%;
  border: .01rem solid #999;
}
.ula .iconfont{
  font-size: .24rem;
}
.top{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 1.8rem;
  background-color: rgb(45, 153, 122);
}
.top p{
  width: 100%;
  height: .5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.top p i{
  padding:0 .2rem;
}
.top p .iconfont{
  font-size: .24rem;
  color: #fff;
}
.top img{
  width: .75rem;
  height: .75rem;
  margin-bottom: .15rem;
  border-radius: 50%;
}
.click{
  width: 1.05rem;
  height: .28rem;
  text-align: center;
  line-height: .28rem;
  border-radius: .2rem;
  background-color: #fff;
  color: #999;
}
.empty{
  height: .3rem;
}
</style>